<template>
  <div>
    <el-card>
      <el-row>
        <el-col :span="8">
          <el-card>
            <div>用户量和今日活跃用户数</div>
          </el-card>
        </el-col>
        <el-col :span="8">
          <el-card>
            <div>帖子数量统计</div>
          </el-card>
        </el-col>
        <el-col :span="8">
          <el-card>
            <div>新增用户数新增用户数</div>
          </el-card>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <el-card>
            <div>举报指标</div>
          </el-card>
        </el-col>
        <el-col :span="8">
          <el-card>
            <div>访客指标</div>
          </el-card>
        </el-col>
        <el-col :span="8">
          <el-card>
            <div>评论指标</div>
          </el-card>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <el-card>
            <div>帖子PV统计</div>
          </el-card>
        </el-col>
        <el-col :span="8">
          <el-card>
            <div>申诉指标</div>
          </el-card>
        </el-col>
        <el-col :span="8">
          <el-card>
            <div> </div>
          </el-card>
        </el-col>
      </el-row>
      <div></div>
    </el-card>
    <el-card>
      <el-row>
        <el-col :span="12">
          <el-card>
            <div id="line1_chart" style="width: 600px; height: 400px;"></div>
          </el-card>
        </el-col>
        <el-col :span="12">
          <el-card>
            <div id="pie1_chart" style="width: 600px; height: 400px;"></div>
          </el-card>
        </el-col>
      </el-row>
    </el-card>
    <el-card>
      <el-row>
        <el-col :span="12">
          <el-card>
            <div id="line2_chart" style="width: 600px; height: 400px;"></div>
          </el-card>
        </el-col>
        <el-col :span="12">
          <el-card>
            <div id="pie2_chart" style="width: 600px; height: 400px;"></div>
          </el-card>
        </el-col>
      </el-row>
    </el-card>
  </div>
</template>

<script>
// Import echarts library
import * as echarts from 'echarts';

export default {
  name: 'App',
  // Use the mounted lifecycle hook to initialize the chart
  mounted() {
    // Get the div element by id
    let line1_chartDiv = document.getElementById('line1_chart');
    let pie1_chartDiv = document.getElementById('pie1_chart');
    let line2_chartDiv = document.getElementById('line2_chart');
    let pie2_chartDiv = document.getElementById('pie2_chart');
    // Create a chart instance
    let line1_chart = echarts.init(line1_chartDiv);
    let pie1_chart = echarts.init(pie1_chartDiv);
    let line2_chart = echarts.init(line2_chartDiv);
    let pie2_chart = echarts.init(pie2_chartDiv);
    // Set the chart options
    let line1_option = {
      xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
      },
      yAxis: {
        type: 'value'
      },
      series: [
        {
          data: [150, 230, 224, 218, 135, 147, 260],
          type: 'line'
        }
      ]
    };
    let line2_option = {
      title: {
        left: 'center',
        text: '访客UV近30天统计折线图'
      },
      xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
      },
      yAxis: {
        type: 'value'
      },
      series: [
        {
          data: [150, 230, 224, 218, 135, 147, 260],
          type: 'line'
        }
      ]
    };
    let pie1_option = {
      tooltip: {
        trigger: 'item'
      },
      legend: {
        top: '5%',
        left: 'center'
      },
      title: {
        left: 'center',
        text: '饼图-话题下发帖子占比'
      },
      series: [
        {
          name: 'Access From',
          type: 'pie',
          radius: ['40%', '70%'],
          avoidLabelOverlap: false,
          label: {
            show: false,
            position: 'center'
          },
          emphasis: {
            label: {
              show: true,
              fontSize: 40,
              fontWeight: 'bold'
            }
          },
          labelLine: {
            show: false
          },
          data: [
            { value: 1048, name: 'Search Engine' },
            { value: 735, name: 'Direct' },
            { value: 580, name: 'Email' },
            { value: 484, name: 'Union Ads' },
            { value: 300, name: 'Video Ads' }
          ]
        }
      ]
    };
    let pie2_option = {
      tooltip: {
        trigger: 'item'
      },
      legend: {
        top: '5%',
        left: 'center'
      },
      title: {
        left: 'center',
        text: '饼图-用户类型占比'
      },
      series: [
        {
          name: 'Access From',
          type: 'pie',
          radius: ['40%', '70%'],
          avoidLabelOverlap: false,
          label: {
            show: false,
            position: 'center'
          },
          emphasis: {
            label: {
              show: true,
              fontSize: 40,
              fontWeight: 'bold'
            }
          },
          labelLine: {
            show: false
          },
          data: [
            { value: 1048, name: 'Search Engine' },
            { value: 735, name: 'Direct' },
            { value: 580, name: 'Email' },
            { value: 484, name: 'Union Ads' },
            { value: 300, name: 'Video Ads' }
          ]
        }
      ]
    };
    // Set the chart option to the chart instance
    pie1_chart.setOption(pie1_option);
    line2_chart.setOption(line2_option);
    pie2_chart.setOption(pie2_option);
    let base = +new Date(1968, 9, 3);
    let oneDay = 24 * 3600 * 1000;
    let date = [];
    let data = [Math.random() * 300];
    for (let i = 1; i < 20000; i++) {
      var now = new Date((base += oneDay));
      date.push([now.getFullYear(), now.getMonth() + 1, now.getDate()].join('/'));
      data.push(Math.round((Math.random() - 0.5) * 20 + data[i - 1]));
    }
    let option2 = {
      tooltip: {
        trigger: 'axis',
        position: function (pt) {
          return [pt[0], '10%'];
        }
      },
      title: {
        left: 'center',
        text: '新增用户折线图'
      },
      toolbox: {
        feature: {
          dataZoom: {
            yAxisIndex: 'none'
          },
          restore: {},
          saveAsImage: {}
        }
      },
      xAxis: {
        type: 'category',
        boundaryGap: false,
        data: date
      },
      yAxis: {
        type: 'value',
        boundaryGap: [0, '100%']
      },
      dataZoom: [
        {
          type: 'inside',
          start: 0,
          end: 10
        },
        {
          start: 0,
          end: 10
        }
      ],
      series: [
        {
          name: 'Fake Data',
          type: 'line',
          symbol: 'none',
          sampling: 'lttb',
          itemStyle: {
            color: 'rgb(255, 70, 131)'
          },
          areaStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              {
                offset: 0,
                color: 'rgb(255, 158, 68)'
              },
              {
                offset: 1,
                color: 'rgb(255, 70, 131)'
              }
            ])
          },
          data: data
        }
      ]
    };
    line1_chart.setOption(option2);
  }
};
</script>